.homepage-banner-image-overlay:nth-of-type(even) {
    position: absolute;
    top: 0px;
    left: 0px;
    animation: float-up-even 20s infinite linear;
    opacity: 0;
}

.homepage-banner-image-overlay:nth-of-type(odd) {
    position: absolute;
    top: 0px;
    left: 0px;
    animation: float-up-odd 10s infinite linear;
    animation-delay: 1s;
    opacity: 0;
}

.homepage-banner-image-overlay-yellow-fish {
    position: absolute;
    top: 0px;
    left: 0px;
    animation: yellow-fish-1 35s infinite linear;    
    opacity: 0;
}

.homepage-banner-image-overlay-yellow-fish-2 {
    position: absolute;
    top: 0px;
    left: 0px;
    animation: yellow-fish-2 30s infinite linear;
    animation-delay: 1s;
    opacity: 0;
}

.homepage-banner-image-overlay-nemo {
    position: absolute;
    top: 0px;
    left: 0px;
    animation: nemo 30s infinite linear;
    animation-delay: 1s;
    opacity: 0;
}

.homepage-banner-image-overlay-red-fish {
    position: absolute;
    top: 0px;
    left: 0px;
    animation: red-fish 20s infinite linear;
    animation-delay: 1s;
    opacity: 0;
}


.homepage-banner-image-overlay-ariel {
    position: absolute;
    top: 0px;
    left: 0px;
    animation: bounce 6s infinite ease-in-out;    
    opacity: 1;
}

.homepage-banner-image-overlay-sign {
    position: absolute;
    top: 0px;
    left: 0px;        
    opacity: 1;
}

@keyframes red-fish {
    0% {        
        scale: 100% 100%;
        transform: translate(0vw,0vw);
        opacity: 0;
    }

    2% {        
        
        opacity: 1;
    }   

    95% {        
        
        opacity: 1;
    }  

    100% {
        transform: translate(30vw,0);
        scale: 100% 100%;
        opacity: 0;
    }
}



@keyframes nemo {
    0% {        
        scale: 100% 100%;
        transform: translate(0vw,0vw) rotate(15deg);
        opacity: 0;
    }

    2% {
        opacity: 1;
    }   

    95% {        
        opacity: 1;
    }  

    100% {
        transform: translate(80vw,0) rotate(15deg);        
        opacity: 0;
    }
}


@keyframes yellow-fish-2 {
    0% {        
        scale: 100% 100%;
        transform: translate(0px,0px);
        opacity: 0;
    }

    2% {        
        scale: 100% 100%;
        transform: translate(-1vw,0px);
        opacity: 1;
    }    

    100% {
        transform: translate(-35vw,0);
        scale: 100% 100%;
        opacity: 1;
    }
}


@keyframes bounce {
    0% {        
        
        transform: translate(0,0);
        opacity: 1;
    }

    10% {        
        
        transform: translate(0,0);
        opacity: 1;
    }    

   50% {       
        opacity: 1;
        transform: translate(0,.5vw);
    }

    100% {
        transform: translate(0,0);
        
        opacity: 1;
    }
}

@keyframes yellow-fish-1 {
    0% {        
        scale: 100% 100%;
        transform: translate(-10vw,0);
        opacity: 1;
    }     

    100% {
        transform: translate(100vw,0);
        scale: 100% 100%;
        opacity: 1;
    }
}


@keyframes float-up-even {
    0% {
        
        scale: 90% 90%;
        opacity: 0;
    }

    10% {       
        opacity: 1;
    }

    100% {
        transform: translate(0px,-300%) rotate(45deg);
        scale: 50% 50%;
        opacity: 0;
        
    }
}


@keyframes float-up-odd {
    0% {
        
        scale: 100% 100%;
        opacity: 0;
    }

    10% {       
        opacity: 1;
    }

    100% {
        transform: translate(0px,-100%) rotate(20deg);
        scale: 80% 80%;
        opacity: 0;
    }
}